<template>
    <div class="verify-container">
        <div class="verify-header">
            <div class="title">输入验证码</div>
            <div class="subtitle">验证码已发送至 {{ phone }}</div>
        </div>

        <div class="verify-form">
            <div class="code-input">
                <van-password-input :value="code" :length="4" :gutter="20" :focused="showKeyboard"
                    @focus="showKeyboard = true" :error="codeError" :mask="false" />
                <van-number-keyboard v-model="code" :show="showKeyboard" @blur="showKeyboard = false" maxlength="4"
                    safe-area-inset-bottom />
            </div>

            <div class="resend">
                <span v-if="countdown > 0">{{ countdown }}秒后重新获取</span>
                <span v-else class="link" @click="handleResend">重新获取验证码</span>
            </div>

            <div class="submit-btn">
                <van-button block type="primary" :disabled="code.length !== 4" @click="handleVerify">
                    登录
                </van-button>
            </div>
        </div>
    </div>
</template>

<script setup>
    import { ref, computed, onMounted, onUnmounted } from 'vue'
    import { useRoute, useRouter } from 'vue-router'
    import { showToast } from 'vant'
    import { userApi } from '@/api/user'
    import { useUserStore } from '@/store'
    import emitter from '@/utils/eventBus'

    const userStore = useUserStore()
    const route = useRoute()
    const router = useRouter()
    const phone = ref('')
    const code = ref('')
    const showKeyboard = ref(true)
    const countdown = ref(60)
    const codeError = ref(false)
    let timer = null
    let isCounting = ref(false); // 标志位

    // 验证码倒计时
    const startCountdown = () => {
        if (isCounting.value) return; // 如果已经在倒计时，直接返回

        handleResend()
        isCounting.value = true; // 设置标志位

        countdown.value = 60;
        timer = setInterval(() => {
            if (countdown.value > 0) {
                countdown.value--;
            } else {
                clearInterval(timer);
                isCounting.value = false; // 倒计时结束，重置标志位
            }
        }, 1000);
    }

    // 重新发送验证码
    const handleResend = async () => {
        try {
            console.log('发送验证码', phone.value)
            await userApi.sendCode(phone.value)
            showToast('发送成功')
            startCountdown()
        } catch (error) {
            showToast('发送验证码失败')
        }
    }
    const onSubtitle = () => {
        console.log('触发')
        emitter.emit('update-interview-status')
        router.replace('/home')
    }

    // 验证登录
    const handleVerify = async () => {
        if (code.value.length !== 4) return

        const res = await userStore.loginForm({
            phone: phone.value.toString(),
            verification_code: Number(code.value),
        })
        console.log(res, "1212")
        if (res) {
            // 触发更新面试记录状态的事件
            emitter.emit('update-interview-status')
            router.replace('/home')
        } else {
            codeError.value = true
            code.value = ''
            showToast('验证码错误')
        }
    }

    onMounted(() => {
        console.log(history.state)
        if (history.state.params && history.state.params.phone) {
            phone.value = history.state.params.phone;
        }
        startCountdown()
    })

    onUnmounted(() => {
        clearInterval(timer)
    })
</script>

<style lang="scss" scoped>
    .verify-container {
        min-height: 100vh;
        background: #fff;
        padding: 40px 20px;
    }

    .verify-header {
        margin-bottom: 40px;

        .title {
            font-size: 24px;
            font-weight: bold;
            color: #333;
            margin-bottom: 8px;
        }

        .subtitle {
            font-size: 14px;
            color: #999;
        }
    }

    .verify-form {
        .code-input {
            margin-bottom: 16px;
        }

        .resend {
            text-align: left;
            margin-bottom: 24px;
            font-size: 14px;
            color: #999;

            .link {
                font-size: 15px;
                font-weight: 400;
                color: rgba(134, 144, 156, 1);
            }
        }

        .submit-btn {
            .van-button {
                height: 44px;
                font-size: 16px;
                border-radius: 8px;
                background: rgb(22, 93, 255);
                border: none;

                &--disabled {
                    background: #eee;
                    color: #999;
                }
            }
        }

        :deep .van-password-input {
            &__error {
                color: #ee0a24;
            }

            .van-password-input__item {
                border-radius: 8px;
                background: rgb(242, 243, 245);
            }
        }

        :deep .van-number-keyboard {
            .van-key {
                color: #000000;
            }
        }
    }
</style>